<template>
  <div class="register">
    <div class="top">
      <div class="title">{{ hospitalDetail.hospitalInfo.hospital?.hosname }}</div>
      <div class="level">
        <svg
          t="1700989732154"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="29820"
          width="16"
          height="16"
        >
          <path
            d="M757.76 852.906667c36.906667-0.021333 72.832-30.208 79.296-66.56l51.093333-287.04c10.069333-56.469333-27.093333-100.522667-84.373333-100.096l-10.261333 0.085333a19972.266667 19972.266667 0 0 1-52.842667 0.362667 3552.853333 3552.853333 0 0 1-56.746667 0l-30.997333-0.426667 11.498667-28.8c10.24-25.642667 21.76-95.744 21.504-128.021333-0.618667-73.045333-31.36-114.858667-69.290667-114.410667-46.613333 0.554667-69.461333 23.466667-69.333333 91.136 0.213333 112.661333-102.144 226.112-225.130667 225.109333a1214.08 1214.08 0 0 0-20.629333 0l-3.52 0.042667c-0.192 0 0.64 409.109333 0.64 409.109333 0-0.085333 459.093333-0.490667 459.093333-0.490666z m-17.301333-495.914667a15332.288 15332.288 0 0 0 52.693333-0.362667l10.282667-0.085333c84.010667-0.618667 141.44 67.52 126.72 150.250667L879.061333 793.813333c-10.090667 56.661333-63.68 101.696-121.258666 101.76l-458.922667 0.384A42.666667 42.666667 0 0 1 256 853.546667l-0.853333-409.173334a42.624 42.624 0 0 1 42.346666-42.730666l3.669334-0.042667c5.909333-0.064 13.12-0.064 21.333333 0 98.176 0.789333 182.293333-92.437333 182.144-182.378667C504.469333 128.021333 546.24 86.186667 616.106667 85.333333c65.173333-0.768 111.68 62.506667 112.448 156.714667 0.256 28.48-6.848 78.826667-15.701334 115.050667 8.021333 0 17.28-0.042667 27.584-0.106667zM170.666667 448v405.333333h23.466666a21.333333 21.333333 0 0 1 0 42.666667H154.837333A26.709333 26.709333 0 0 1 128 869.333333v-437.333333c0-14.784 12.074667-26.666667 26.773333-26.666667h38.912a21.333333 21.333333 0 0 1 0 42.666667H170.666667z"
            fill="#bfbfbf"
            p-id="29821"
          ></path>
        </svg>
        <span>{{ hospitalDetail.hospitalInfo.hospital?.param.hostypeString }}</span>
      </div>

    </div>
    <!-- 展示内容的区域 -->
    <div class="content">
      <div class="left">
        <img :src="`data:image/jpeg;base64,${hospitalDetail.hospitalInfo.hospital?.logoData}`">
      </div>
      <div class="right">
        <div>挂号规则</div>
        <div class="rules">
          <div class="time">
            <span>预约周期：{{ hospitalDetail.hospitalInfo.bookingRule?.cycle }}</span>
            <span>放号时间：{{ hospitalDetail.hospitalInfo.bookingRule?.releaseTime }}</span>
            <span>停挂时间：{{ hospitalDetail.hospitalInfo.bookingRule?.quitTime }}</span>
          </div>
          <div class="address">具体位置：{{ hospitalDetail.hospitalInfo.hospital?.param.fullAddress }}</div>
          <div class="route">具体路线：{{ hospitalDetail.hospitalInfo.hospital?.route }}</div>
          <div class="releasetime">退号时间：就诊前一工作日{{ hospitalDetail.hospitalInfo.bookingRule?.quitTime }}前取消</div>
        </div>
        <div class="appointment">预约挂号规则</div>
        <div
          class="ruleInfo"
          v-for="(item, index) in hospitalDetail.hospitalInfo.bookingRule?.rule"
          :key="index"
        >{{ index + 1 }}. {{ item }}</div>
      </div>
    </div>
    <!-- 放置每一个医院的科室的数据 -->

  </div>
</template>

<script setup lang="ts">
// 引入医院详情仓库的数据
import useDetailStore from '@/store/modules/hospitalDetail'
let hospitalDetail = useDetailStore();

</script>
<script lang="ts">
export default {
  name: 'Register'
}
</script>

<style scoped lang="scss">
.register {
  .top {
    display: flex;
    align-items: center;

    .title {
      font-size: 30px;
      font-weight: 900;
    }

    .level {
      display: flex;
      margin-left: 10px;
      color: #7f7f7f;

      span {
        margin-left: 5px;
      }
    }
  }

  .content {
    margin-top: 30px;
    display: flex;

    .left {
      margin-right: 30px;
      width: 80px;

      img {
        width: 100%;
        height: 80px;
        border-radius: 50%;
      }
    }

    .right {
      flex: 1;

      .rules {
        &>div {
          margin-top: 10px;
          font-size: 14px;
          color: #7f7f7f;
        }

        margin-top: 20px;

        .time {
          span {
            margin-right: 60px;
          }
        }

        .route {
          line-height: 1.5em;
        }
      }

      .appointment {
        margin: 20px 0;
      }

      .ruleInfo {
        margin-top: 10px;
        font-size: 14px;
        color: #7f7f7f;
      }
    }
  }
}
</style>